<script>
import MAIN_STORE from "@/store/store.js";
import { Expand, Fold } from "@element-plus/icons-vue";
export default {
  /**
   * 图层树
  */
  name: "layer-tree",
  components: { Expand, Fold },
  data() {
    return {
      // 默认坍缩状态
      collapsed: true,
      valueFlow: false,
      valueLegend: false,
      defaultProps: {
        children: "children",
        label: "name",
        class: "self-tree-item",
      },
      treeData: [
        {
          name: "污水",
          children: [
            {
              name: "污水管线",
              id: "wu-shui-guan-xian",
              isLeaf: true,
              children: [],
            },
            {
              name: "污水管点",
              id: "wu-shui-guan-dian",
              isLeaf: true,
              children: [],
            },
          ],
        },
        {
          name: "雨水",
          children: [
            {
              name: "雨水管线",
              id: "yu-shui-guan-xian",
              isLeaf: true,
            },
            {
              name: "雨水管点",
              id: "yu-shui-guan-dian",
              isLeaf: true,
            },
          ],
        },
        {
          name: "缺陷点",
          id: "que-xian-dian",
          isLeaf: true,
        },
      ],
      defaultCheckedKeys: [
        "wu-shui-guan-xian",
        "wu-shui-guan-dian",
        "yu-shui-guan-xian",
        "yu-shui-guan-dian",
        "que-xian-dian",
      ],
    };
  },
  computed: {
    showLegend() {
      const tag1 = ['Search', 'Decision'].indexOf(this.$route.name) !== -1
      return tag1 && this.valueLegend
    }
  },
  watch: {
    valueFlow(v) {
      // console.log(v, 'v');
    }
  },
  mounted() { },
  beforeUnmount() { },
  methods: {
    checkChange(value, tag) {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS;
      if (!mapIns) {
        return;
      }
      const mapboxStyle = MAIN_STORE.MAPBOX_STYLE;
      if (!mapboxStyle) {
        return;
      }
      const styleObj = MAIN_STORE.STYLE_OBJ;
      if (!styleObj) {
        return;
      }
      const [targetLayer] = styleObj.layers.filter((v) => {
        return v.id === value.id;
      });
      if (!targetLayer) {
        return;
      }
      targetLayer.layout.visibility = tag ? "visible" : "none";
      mapboxStyle.updateStyles(styleObj.layers);
      mapboxStyle.clearSelectedObjects();
      MAIN_STORE.VECTOR_LAYER && MAIN_STORE.VECTOR_LAYER.changed();
    },
    expandAll() {
      this.collapsed = false;
    },
    foldAll() {
      this.collapsed = true;
    },
  },
};
</script>

<template>
  <div class="layer-tree" :class="[
    collapsed ? 'collapsed' : '',
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? 'stick-side' : ''
  ]">
    <div class="header">
      <div v-if="collapsed" class="icon-area colla hover-pointer" @click="expandAll">
        <el-icon>
          <Fold color="#2168b2" />
        </el-icon>
      </div>
      <span v-if="!collapsed" class="title font-alimamashuheiti">
        管线管点列表
      </span>
      <div v-if="!collapsed" class="icon-area expand hover-pointer" @click="foldAll">
        <el-icon>
          <Expand color="#2168b2" />
        </el-icon>
      </div>
    </div>
    <div class="function" v-if="!collapsed">
      <el-switch v-model="valueFlow" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666"
        active-text="展示流向" inactive-text="隐藏流向" />
      <el-switch v-if="['Search', 'Decision'].indexOf($route.name) !== -1" v-model="valueLegend" inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666; margin-left: 1rem;" active-text="展示图例"
        inactive-text="隐藏图例" />
    </div>

    <el-tree v-if="!collapsed" ref="layerTree" class="self-tree" :data="treeData" :props="defaultProps" node-key="id"
      :check-strictly="true" :default-checked-keys="defaultCheckedKeys" @check-change="checkChange" empty-text="暂无数据">
      <template #default="{ node, data }">
        <el-checkbox v-if="node.isLeaf" v-model="node.checked"></el-checkbox>
        <div class="name">
          {{ data.name }}
        </div>
      </template>
    </el-tree>
    <div class="legend" v-if="showLegend">
    </div>
  </div>

</template>
<style>
.self-tree {
  /* width: 50rem;
  --el-font-size-base: 3rem; */
}

.self-tree-item {
  /* --el-tree-node-content-height: 5rem;
  padding: 1rem 0; */
}

.self-tree-item .el-tree-node__label {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.self-tree-item .el-checkbox {
  /* --el-checkbox-input-width: 3rem;
  --el-checkbox-input-height: 3rem; */
}

.self-tree-item .el-tree-node__expand-icon {
  /* font-size: 3rem; */
}

.self-tree-item .el-checkbox__inner::after {
  /* width: 1rem;
  height: 2rem;
  border-width: 0.3rem;
  top: 0rem;
  left: 0.8rem; */
}

.self-tree .el-tree-node:focus>.el-tree-node__content {
  /* background-color: transparent; */
}

.self-tree-item .tubiao {
  /* display: flex;
  flex-direction: row;
  align-items: center;
  width: 10rem;
  height: 100%;
  justify-content: flex-end;
  margin-right: 2rem; */
}

.self-tree-item .tubiao-1 {
  /* display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  margin-left: 2rem; */
}

.self-tree-item .name {
  /* overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; */
}
</style>
<style lang="less" scoped>
.layer-tree {
  position: fixed;
  right: 46rem;
  top: 11rem;
  pointer-events: all;
  font-size: 3rem;
  width: 30rem;
  border-radius: initial;
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);

  &.stick-side {
    right: 2rem;
  }

  &.collapsed {
    width: initial;
    height: initial;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: initial;

    &:hover {
      box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);
    }
  }

  &>.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    &>.title {
      font-size: 2rem;
      color: #2168b2;
      padding-left: 1rem;
    }

    &>.icon-area {
      width: 4rem;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;

      &.expand {
        z-index: 2;
      }
    }
  }

  &>.function {
    padding-left: 1rem;
    background-color: #fff;
  }
}

.legend {
  position: fixed;
  bottom: 10rem;
  right: 10rem;
  width: 25rem;
  height: 30rem;
  background-color: #fff;
  background-image: url(@/assets/images/legend.jpg);
  background-size: 100% 100%;
}
</style>
